<template>
    <div class="body">
      <card class="card" icon="ios-options">
        <vxe-table
          border
          resizable
          highlight-current-row
          show-overflow="tooltip"
          row-id="id"
          header-align="center"
          align="left"
          :tree-config="{lazy: true,children: 'children',expandRowKeys: defaultExpandKeys,line: true , hasChild: 'hasChild', loadMethod: loadChildrenMethod}"
          :data="datalist">
          <vxe-table-column field="name" width="70%" title="区域" tree-node>
            <template v-slot="{ row }">
              <div @click="cellClickEvent(row)">
                <Tag v-if="row.grade==='6'" color="primary">网格</Tag>
                <Tag v-if="row.grade==='7'" color="primary">楼</Tag>
                <Tag v-if="row.grade==='8'" color="primary">单元</Tag>
                {{row.name}}
              </div>
            </template>
          </vxe-table-column>
          <vxe-table-column field="gradenNum" title="网格数量">
            <template v-slot="{ row }">
              <div v-if="parseInt(row.grade)<6">
                <span v-if="row.gradenNum===undefined">0</span>
                <span v-else>{{row.gradenNum}}</span>
              </div>
            </template>
          </vxe-table-column>
          <vxe-table-column field="buildingNum" title="楼数量">
            <template v-slot="{ row }">
              <div v-if="parseInt(row.grade)<6">
                <span v-if="row.buildingNum===undefined">0</span>
                <span v-else>{{row.buildingNum}}</span>
              </div>
              <div v-if="parseInt(row.grade)===6">
                <!--                <span>111</span>-->
                <!--                <span v-if="row.buildingNum===undefined">0</span>-->
                <span>{{row.BuildingNum}}</span>
              </div>
            </template>
          </vxe-table-column>
<!--          <vxe-table-column field="num" title="下级数量">-->
<!--            <template v-slot="{ row }">-->
<!--              <div v-if="severUserInfo.company_grade!=='5'">-->
<!--                <div v-if="parseInt(row.grade) < 5">{{row.children.length}}</div>-->
<!--                <div v-if="parseInt(row.grade) ===5">{{row.num.gardennum}}</div>-->
<!--                <div v-if="parseInt(row.grade) ===6">{{row.num.buildingnum}}</div>-->
<!--                <div v-if="parseInt(row.grade) ===7">{{row.num.doorplatenum}} 户</div>-->
<!--              </div>-->
<!--              <div v-if="severUserInfo.company_grade==='5'">-->
<!--                <div v-if="parseInt(row.grade) ===5">{{row.children.length}}</div>-->
<!--                <div v-if="parseInt(row.grade) ===6">{{row.num.buildingnum}}</div>-->
<!--                <div v-if="parseInt(row.grade) ===7">{{row.num.doorplatenum}} 户</div>-->
<!--              </div>-->
<!--            </template>-->
<!--          </vxe-table-column>-->
        </vxe-table>
      </card>
    </div>
</template>

<script>
import { findOfficeLevelList, findTreeList } from '@/api/eventlist'
export default {
  name: 'grid-tree-vxe-two',
  data () {
    return {
      datalist: [],
      pickInfo: {},
      defaultExpandKeys: ['999999999'],
      severUserInfo: {}
    }
  },
  methods: {
    loadChildrenMethod ({ row }) {
      if (parseInt(row.grade) >= 5) {
        return new Promise(resolve => {
          let data = {
            grade: row.grade,
            id: row.id
          }
          findTreeList(data).then(res => {
            if (res.data.errcode === 0) {
              resolve(res.data.data)
            } else {
              this.$Notice.error({
                title: '获取树形结构失败',
                desc: res.data.errmsg
              })
            }
          })
        })
      }
    },
    cellClickEvent (e) {
      this.pickInfo = e
    },
    init () {
      this.tree()
    },
    tree () {
      // 调整缩放程度
      findOfficeLevelList().then(res => {
        if (res.data.errcode === 0) {
          let result = res.data.data
          if (result.grade === '5') {
            result.hasChild = true
          }
          this.datalist.push(result)
          this.pickInfo = result
          if (result.grade === '5') {
            let data = {
              grade: result.grade,
              id: result.id
            }
            findTreeList(data).then(ret => {
              if (ret.data.errcode === 0) {
                let result = ret.data.data
                this.datalist[0].children = result
              } else {
                this.$Notice.error({
                  title: '获取树形结构失败',
                  desc: ret.data.errmsg
                })
              }
            })
          }
        } else {
          this.$Notice.error({
            title: '获取树形结构失败',
            desc: res.data.errmsg
          })
        }
      })
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.init()
  },
  watch: {
    'pickInfo.id' (val) {
      if (val) {
        this.$emit('getPickInfo', this.pickInfo)
      }
    }
  }
}
</script>

<style scoped>

  .card {
    background:rgba(255,255,255,0.93);
    height:650px;
    overflow: auto;
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: rgba(255,255,255,0.93);
  }

  ::-webkit-scrollbar-thumb {
    border-radius:5px;
    -webkit-box-shadow: inset 0 0 6px rgba(250, 250, 250, .3);
    background-color: rgba(220,220,220,0.93);
  }

  ::-webkit-scrollbar-corner {
    background-color: rgba(255,255,255,0.93);
  }

  .search_input /deep/ input {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    background-color: rgba(255,255,255,0.93) !important;
  }
</style>
